<template>
  <div>
    <!-- 导航条以及外壳 -->
    <div class="top">
      <span @click="chaegs()">我的订单</span>
      <span>></span>

      <span style="color: #ffbe37">发票申请</span>
    </div>
    <div class="autn">
      <div
        class="grey"
        style="border: 1px solid #cccccc"
        v-for="(item, index) in commodity.commList"
        :key="index"
      >
        <div class="dlex3-div">
          <img class="dlex_img" :src="imageWebUrl + item.cover" alt="" />
          <div class="dlex_introduce">
            <span>{{ item.name }}</span>
            <p>来源：{{ item.source }}</p>
          </div>
          <div class="price">
            <span class="redTxt">￥</span>
            <span class="redTxt">
              {{ item.originalPrice }}
            </span>
          </div>
        </div>
      </div>
      <div class="greys">
        <div class="dlex1-div">
          <div class="yellowBar"></div>
          <span class="titleTxt2">发票信息</span>
        </div>
        <div class="dlex_radio">
          <a-radio-group v-model="invoiceCode" @change="onChange">
            <div class="dio" v-for="(item, index) in invoiceList" :key="index">
              <a-radio :value="index">
                <span
                  >{{ item.invoiceType == "01" ? "个人" : "企业" }} /
                  {{ item.invoiceHead }}  {{item.identificNumber==null?null:'/'}}   {{ item.identificNumber }} /
                  {{ item.drawerEmail }}</span
                >
              </a-radio>
            </div>
          </a-radio-group>
        </div>
        <a-button v-if="invoiceList.length < 7" @click="showModal" class="introduce_btn">
          <img src="@/assets/image/icon_add.png" alt="" /> 添加发票信息
        </a-button>
      </div>
    </div>
    <div class="bottom" v-if="invoiceList.length > 0">
      <a-button class="btnss" @click="chaegs()">取消</a-button>
      <a-button
        type="primary"
        class="btnss"
        style="margin-left: 32px"
        @click="transfer()"
      >
        提交
      </a-button>
    </div>
    <div>
      <a-modal v-model="visible" title="添加发票信息" @ok="handleOk()">
        <a-form
          :form="form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
          @submit="handleSubmit"
        >
          <a-form-item label="抬头类型：">
            <a-select
              v-decorator="[
                'invoiceType',
                {
                  rules: [{ required: true, message: '请选择抬头类型' }],
                  initialValue: realTime.invoiceType,
                },
              ]"
              placeholder="请选择发票类型"
              @change="handleSelectChange"
            >
              <a-select-option value="02"> 企业 </a-select-option>
              <a-select-option value="01"> 个人 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="发票抬头：">
            <a-input
              v-decorator="[
                'invoiceHead',
                {
                  rules: [
                    { required: true, message: '请填写发票抬头!' },
                    {
                      pattern: /^[0-9a-zA-Z\(\)\（\）\u4e00-\u9fa5]{0,50}$/,
                      message: '请填写发票抬头',
                    },
                  ],
                  initialValue: realTime.invoiceHead,
                },
              ]"
              placeholder="请填写开票人姓名；请填写接收电子邮箱"
            />
          </a-form-item>
          <a-form-item label="识别号：" v-if="formFlag">
            <a-input
              v-decorator="[
                'identificNumber',
                {
                  rules: [
                    { required: true, message: '请填写识别号！' },
                    {
                      pattern:
                        /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
                      message: '请填写正确识别号！',
                    },
                  ],
                  initialValue: realTime.identificNumber,
                },
              ]"
              placeholder="请填写识别号"
            />
          </a-form-item>
          <a-form-item label="邮箱：">
            <a-input
              v-decorator="[
                'drawerEmail',
                {
                  rules: [
                    { required: true, message: '请填写邮箱!' },
                    {
                      pattern:
                        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
                      message: '请输入正确的邮箱',
                    },
                  ],
                  initialValue: realTime.drawerEmail,
                },
              ]"
              placeholder="请填写识别号"
            />
          </a-form-item>
          <a-form-item label="开户银行：" v-if="formFlag">
            <a-input
              v-decorator="[
                'openBanck',
                {
                  rules: [{ required: false, message: '请填写开户银行!' }],
                  initialValue: realTime.openBanck,
                },
              ]"
              placeholder="请填写识开户银行"
            />
          </a-form-item>
          <a-form-item label="银行账号：" v-if="formFlag">
            <a-input
              v-decorator="[
                'bankAccount',
                {
                  rules: [
                    { required: false, message: '请填写正确银行账号！' },
                    {
                      pattern: /^([1-9]{1})(\d{14,18})$/,
                      message: '请填写正确的银行账号！',
                    },
                  ],
                  initialValue: realTime.bankAccount,
                },
              ]"
              placeholder="请填写银行账号"
            />
          </a-form-item>
          <a-form-item label="备注：" v-if="formFlag">
            <a-input
              v-decorator="[
                'invoiceDescr',
                {
                  rules: [{ required: false, message: '' }],
                  initialValue: realTime.invoiceDescr,
                },
              ]"
            />
          </a-form-item>
        </a-form>
        <div class="btns" slot="footer">
          <a-button class="btn_info" type="primary" @click="handleSubmit">
            提交
          </a-button>
          <a-button class="btn_info" @click="handleOk(1)"> 取消 </a-button>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    // 查看商品信息
    // this.getOrder();
  },
  props: {
    detFlag: Boolean,
  },
  data() {
    return {
      // 订单编码
      orderNo: "",
      value: 1,
      invoiceCode: '',
      selBorder: true,
      selvalue: true,
      // 商品展示信息
      commodity: {},
      dasflag: true,
      // 表单内操作
      visible: false,
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      // 控制表单内选项
      formFlag: true,
      iconLoading: false,
      // 用户当前已有的发票抬头
      invoiceList: [],
      // 用户选择的第几张发票
      value: undefined,
      // 编辑时渲染
      realTime: {},
    };
  },
  methods: {
    chaegs() {
      this.$emit("changeComponent2Data", false);
    },
    // 对话框中的内容
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      // console.log(e);
      this.visible = false;
    },
    // 选择
    onChange(e) {
      // console.log("radio checked", e.target.value);
      this.value = e.target.value;
    },
    // 提交
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.addInvoice(values);
          // console.log("Received values of form: ", values);
          this.handleOk(1);
        }
      });
    },
    // 选择发票模板
    handleSelectChange(value) {
      if (value != "01") {
        this.form.invoiceType = value;
        this.formFlag = true;
      } else {
        this.form.invoiceType = value;
        this.formFlag = false;
      }
      // console.log(this.form.invoiceType);
    },
    // 接口部分
    // 查询订单详情
    getOrder(e) {
      this.orderNo = e;
      this.$ajax({
        url: "/order/order/get",
        method: "post",
        params: {
          orderNo: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.dasflag = false;
          this.commodity = res.data;
          // console.log(e);
        } else {
        }
      });
    },
    // 新增发票详情信息
    addInvoice(e) {
      e.defaultFlag = "N";
      this.$ajax({
        url: "/user/user/invoice/save",
        method: "post",
        params: e,
      }).then((res) => {
        if (res.code == 200) {
          this.getInvoicelist();
          this.$message.success("操作成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 查询用户已添加的发票抬头等信息
    getInvoicelist() {
      this.$ajax({
        url: "/user/user/invoice/list?pageIndex=1" + "&pageSize=7",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.invoiceList = res.data.list;
          for (let index = 0; index < this.invoiceList.length; index++) {
            if (this.invoiceList[index].defaultFlag == "Y") {
              this.invoiceCode = index;
              break;
            }
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 查找默认发票
    //中转操作
    transfer() {
      if (this.invoiceCode!=undefined) {
        let ber = this.invoiceList[this.invoiceCode];
        this.selSubmit(ber);
      } else {
        this.$message.warning("请选择一份发票信息");
      }
    },
    // 发票申请
    selSubmit(e) {
      e.orderNo = this.orderNo;
      this.$ajax({
        url: "/user/invoice/record/save",
        method: "post",
        params: e,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this. chaegs();
        } else {
          this.$message.error(res.msg);
          this. chaegs();
        }
      });
    },
  },
  mounted() {
    // 查询用户
    this.getInvoicelist();
  },
};
</script>

<style lang="less" scoped>
.top {
  span {
    margin-left: 5px;
    font-size: 12px;
    font-family: PingFang SC;
    color: #999999;
    cursor: pointer;
  }
  span:nth-child(1) {
    margin-left: 0px;
  }
}

.autn {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 40px;
  .grey {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    .dlex1-div {
      padding-bottom: 8px;
    }
    .dlex_img {
      flex-shrink: 0;
      width: 144px;
      height: 81px;
    }

    .select {
      background-image: url("~@/assets/image/sexback.png");
      background-size: 100% 100%;
      border: none !important;
    }
    .dlex_txt {
      width: 140px;
      height: 44px;
      cursor: pointer;
      border: 1px solid #999999;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 16px;
        font-family: PingFang SC;
        justify-content: center;
        color: #333333;
      }
    }
    .dlex_introduce {
      margin-left: 32px;
      flex: 1;
      span {
        display: block;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #333333;
        margin-top: 8px;
      }
      p {
        font-size: 15px;
        font-family: PingFang SC;
        color: #666666;
        margin-top: 16px;
      }
    }
    .price {
      overflow: hidden;
      margin-top: 19px;
      text-align: right;
    }
  }
  .greys {
    margin-top: 24px;
  }
  .at_rignt {
    float: right;
    padding: 16px 0;
    text-align: right;
  }
}
.dlex_radio {
  margin-top: 24px;
  margin-bottom: 29px;
  span {
    font-size: 14px;
    font-family: PingFang SC;
    color: #333333;
  }
  .dio {
    margin-bottom: 20px;
  }
}
.tip {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ca0000;
  line-height: 17px;
}
// 按钮样式
.introduce_btn {
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  background: rgba(255, 190, 55, 0.1);
  font-family: PingFang SC;
  color: #232d32;
  line-height: 20px;
  img {
    width: 12px;
    margin-right: 4px;
  }
}
.bottom {
  width: 100%;
}
.btnss {
  width: 92px;
  height: 40px;
  border-radius: 4px;
}
.sobtn {
  background-color: #ffffff;
  margin-right: 8px;
}
.greyBlue {
  font-size: 14px;
}
.dlex2-div {
  margin-top: 16px;
}

.spin-content {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  // padding: 30px;
}
/deep/.ant-spin {
  width: 100%;
  height: 100%;
}
/deep/.ant-btn {
  span {
    font-family: PingFang SC;
  }
}
/deep/.ant-modal-header {
  text-align: center;
}
.btns {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  .btn_info {
    width: 92px;
    height: 40px;
    border-radius: 4px;
  }
}
</style>